<template>
    <div>
        <!--<h1 style="margin-top: 40px;margin-left: 20px">基础设置</h1>

                            action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
-->
        <el-row>
            <el-upload
                    action="xxx"
                    :http-request="UploadImage"
                    class="avatar-uploader"
                    :show-file-list="false"
                    >
            <div class="mulu">
<span style="display:block;font-size: 17px;height: 50px;line-height: 50px;margin-top: 0px;
                margin-left: 180px;padding-left: 30px;">更改头像</span>
                <img :src="form.avatar" v-if="form.avatar" class="xw-header-avatar"/>

            </div>
            </el-upload>
        </el-row>

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
            <el-col :span="11">
            <el-input v-model="form.userName" readOnly="true"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="密码">
            <el-col :span="11">
            <el-input v-model="form.password" type="password"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="岗位">
            <el-col :span="11">
            <el-input v-model="form.roleName" readOnly="true"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="个人简介">
            <el-col :span="11">
            <el-input type="textarea" v-model="form.remark"></el-input>
            </el-col>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>

    </div>
</template>

<script>
    import {handleAvatarSuccess, updateUserInfo} from "../../api/api";
    import Axios from 'axios';
    export default {
        name: "UserInfo",
        created(){
            let aa=JSON.parse(sessionStorage.getItem("mockUser"))
            this.form=aa
            // this.from.userName=aa.userName
            // this.from.password=aa.password
            // this.from.remark=aa.remark
            // this.from.id=aa.id
            // this.from.roleName=aa.roleName
            // this.from.avatar=aa.avatar
        },
        data() {
            return {
                myHeaders:{},
                //avatar:'@/assets/avatar.jpg',
                form: {},
                    // userName:'',
                    // password:'',
                    // remark:'',
                    // id:'',
                    // roleName:'',
                    // avatar:''
                }

        },
        methods: {
            // beforeSubmit(){
            //     this.myHeaders={
            //         'Content-Type': 'multipart/form-data',
            //         'file_path':'a/b/c/',
            //         'access_flag':1
            //     }
            // },

            UploadImage(file){
                let fromData = new FormData()
                fromData.append('file', file.file)
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'file_path':'a/b/c/',
                        'access_flag':1
                    }
                }
                Axios.post('/api/file/upload', fromData, config).then( res => {
                    let data = res.data
                    if(data.errcode == 0){
                        console.log(data.data)
                        this.form.avatar= "/api/file/download/"+data.data.fileName;
                        this.$message.success("success")
                    }else {
                        this.$message.success("fail")
                    }
                }).catch( res => {

                })
            },
            onSubmit() {
                updateUserInfo(this.form).then(res=>{
                    sessionStorage.setItem("mockUser",JSON.stringify(this.form))
                })
                console.log('submit!');
            }
        }
    }
</script>

<style scoped>
    .mulu {
        width: 100%;
        overflow: hidden;
        /*border-bottom: 1px solid #f4f4f4;*/
    }
    .el-form{
        margin-top: 20px;
    }

    .xw-header-avatar {
        /*float: left;*/
        margin-left: 200px;
        height: 100px;
        width: 100px;
        border-radius: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
        margin-right: 8px;
        margin-top: 20px;
        margin-bottom: 5px;
    }
</style>